<script setup>
import Badge from "./Badge.vue";
import ComponentLayout from "@/components/component-layout.vue";
import {code} from "./code.js"
</script>

<template>
  <div>
    <component-layout :code>
      <template #preview>
        <div >
          <div>
            点
            <Badge dot>
              <div class="w-7 h-7 bg-amber-400"></div>
            </Badge>
          </div>


          <div>
            字符串
            <Badge text="999+">
              <div class="w-7 h-7 bg-amber-400"></div>
            </Badge>
          </div>


          <div>
            自定义icon
            <Badge>
              <template #content>
                <el-icon><Check /></el-icon>
              </template>
              <div class="w-7 h-7 bg-amber-400"></div>
            </Badge>
          </div>

        </div>
      </template>
    </component-layout>
  </div>
</template>

<style scoped>

</style>